<template>
  <div class="login">
    <video autoplay loop muted>
      <source src="../assets/login/bg_video.mp4" type="video/mp4" />
    </video>
    <div class="bg_logo">
      <img src="../assets/login/bg_logo.png" />
    </div>
    <img class="img_box" src="../assets/login/bg_form_border.png" width="400" />
    <div class="login_box">
      <div class="box_title">欢迎登陆</div>
      <!-- 登录表单区域 -->
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        size="mini"
        @keyup.enter.native="handleLogin"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码" 
            show-password
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-input
            v-model="loginForm.code"
            class="code"
            placeholder="验证码"
            @keyup.enter.native="checkCode()"
          ></el-input>
          <div class="confirm" @click="refreshCode()">
            <ConfirmCode :identifyCode="identifyCode" class="confirm_code" />
          </div>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click.native.prevent="handleLogin"
            >安全登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ValidCode from "./Login/ValidCode";
import { cofirmAction } from "../store/actionTypes";
import ConfirmCode from "../views/Login/Confirm_Code.vue";
import axios from "axios";
import { BACKEND_ROOT } from "../Constants";

export default {
  components: {
    ConfirmCode,
  },
  data() {
    return {
      identifyCodes: "1234567890", // 验证码组成元素
      identifyCode: "", // 验证码生成结果
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            message: "用户名不能为空",
          },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码错误，请重试" },
        ],
        code: [
          { required: true, trigger: "change", message: "验证码不能为空" },
        ],
      },
      imgSrc: "",
    };
  },
  created() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 重置验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      this.loginForm.code = "";
    },
    makeCode(o, l) {
      // o代表随机数元素集合，l代表验证码位数（现在为4位验证码）
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    checkCode() {
      if (
        this.loginForm.code.toLowerCase() === this.identifyCode.toLowerCase()
      ) {
        // this.$message.success("验证成功!");
        // 执行功能函数
        this.handleLogin();
      } else if (
        this.loginForm.code.toLowerCase() !== this.identifyCode.toLowerCase()
      ) {
        this.$message.error("请填写正确验证码");
        this.refreshCode();
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const data = {
            password: this.loginForm.password,
            userName: this.loginForm.username,
            validateCode: this.loginForm.code,
          };
          const formData = new FormData();
          for (const [key, value] of Object.entries(data)) {
            formData.append(key, value);
          }
          axios({
            method: "post",
            url: "/group/login/gpLogin",
            data: formData,
          }).then((res) => {
            console.log(res);
            if (res.data.resultCode === "204") {
              this.$message.error("用户不存在");
            } else if (res.data.resultCode === "200") {
              // 登陆成功，跳转到首页
              window.sessionStorage.setItem("token", res.data.parameter);
              window.sessionStorage.setItem("user", this.loginForm.username);
              this.$router.push({ path: "/index" });
              this.$store.dispatch(cofirmAction.UPDATE_HOME_DATA);
              return undefined;
            } else if (res.data.resultCode === "206") {
              this.$message.error("用户密码错误");
            } else if (res.data.resultCode === "422") {
              this.$message.error("用户名为空");
            } else if (res.data.resultCode === "424") {
              this.$message.error("用户无权限");
            } else if (res.data.resultCode === "418") {
              this.$message.error("验证码错误");
            }
            // this.getVerifyCode();
          });
        }
      });
    },
    // getVerifyCode() {
    //   axios({
    //     url: BACKEND_ROOT + "/web/verifyCode",
    //     method: "get",
    //     responseType: "blob",
    //   }).then((res) => {
    //     const url = window.URL.createObjectURL(res.data);
    //     console.log("构造验证码", url);
    //     this.imgSrc = url;
    //   });
    // },
  },
};
</script>

<style scoped>
video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  z-index: -11;
  transform: rotateY(180deg);
}
source {
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}
.bg_logo {
  width: 1.5rem;
  position: absolute;
  left: 60%;
  top: 62%;
  transform: translate(80%, -480%);
}
.bg_logo img {
  height: 100%;
  width: 100%;
}
.box_title {
  font-size: 0.2rem;
  color: white;
  margin: 0.08rem;
  margin-bottom: 0;
  text-align: center;
}

.img_box {
  width: 1.9rem;
  height: 2.2rem;
  position: absolute;
  left: 61.5%;
  top: 52%;
  transform: translate(43.5%, -55%);
}
.login_box {
  width: 1.5rem;
  height: 1.7rem;
  position: absolute;
  left: 60%;
  top: 50%;
  transform: translate(80%, -50%);
}
.el-form {
  padding: 0.1rem;
  position: absolute;
  /* bottom: 0; */
  width: 100%;
  box-sizing: border-box;
}
.el-input >>> .el-input__inner {
  background-color: #fff;
  border: 0.005rem solid #2a82b5;
}
.el-button {
  width: 100%;
}
.code {
  /* font-size: 0.01rem; */
  width: 50%;
}
.confirm {
  display: inline-block;
  position: relative;
  top: 0.052rem;
  left: 1%;
  margin: 0;
  padding: 0;
}
</style>